<template>
  <div class="ba_f pad_20">
    <el-tabs v-model="activeName" class="mar_b20" @tab-click="tableName">
      <el-tab-pane label="提现列表" name="1"></el-tab-pane>
      <el-tab-pane label="提现设置" name="2"></el-tab-pane>
    </el-tabs>
    <template v-if="activeName == 1">
      <div class="outmain ba_f">
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>提现列表</span>
          </div>
        </div>
        <div class="pad_20 flex-bet">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px">
            <el-form-item label="提现状态">
              <el-select v-model="formInline.state" placeholder="请选择" @change="onSearch">
                <el-option v-for="item in withstate" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="提现时间">
              <el-date-picker @change="onSearch" v-model="formInline.timeData" type="daterange" range-separator="至"
                              start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="type" label="用户信息">
            <template slot-scope="scope">
              <div class="flex flex-y-top">
                <div class="">
                  <img class="goodlogo bor_rad50" :src="scope.row.portrait"/>
                </div>
                <div class="mar_l10">
                  <div>{{ scope.row.userName }}</div>
                  <div>
                    <el-tag size="mini" type="info" class="mar_l5">（ID:{{ scope.row.userId }}）
                    </el-tag>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="account" label="提现渠道">
            <template slot-scope="scope">
              <div v-if="scope.row.type=='1'">微信</div>
              <div v-if="scope.row.type=='2'">支付宝</div>
              <div v-if="scope.row.type=='3'">银行卡</div>
              <div v-if="scope.row.type=='4'">余额</div>
            </template>
          </el-table-column>
          <el-table-column prop="account" label="提现信息">
            <template slot-scope="scope">
              <div v-if="scope.row.type=='1'">
                <div>微信提现</div>
              </div>
              <div v-if="scope.row.type=='2'">
                <div>支付宝姓名:{{ scope.row.account.aliUserName }}</div>
                <div>支付宝账号:{{ scope.row.account.aliAccount }}</div>
              </div>
              <div v-if="scope.row.type=='3'">
                <div>银行卡:{{ scope.row.account.bankName }}</div>
                <div>银行卡姓名:{{ scope.row.account.bankUserName }}</div>
                <div>银行卡账号:{{ scope.row.account.bankAccount }}</div>
              </div>
              <div v-if="scope.row.type=='4'">
                <div>余额提现</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="money" label="提现金额">
            <template slot-scope="scope">
              <div>
                {{ scope.row.money }}
                <!--                <span style="color: #df0029" v-if="scope.row.state=='3'">(已退回到账户余额)</span>-->
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="money" label="手续费">
            <template slot-scope="scope">
              <div>{{ scope.row.charge }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="actualMoney" label="到账金额">
            <template slot-scope="scope">
              <div>{{ scope.row.actualMoney }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="申请时间"></el-table-column>
          <el-table-column prop="state" label="提现状态" align="center">
            <template slot-scope="scope">
              <div style="color:#155BD4" v-if="scope.row.state=='1'">待审核</div>
              <div style="color: #489620" v-if="scope.row.state=='2'">已通过</div>
              <div style="color: #df0029" v-if="scope.row.state=='3'">已拒绝</div>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="操作" align="center">
            <template slot-scope="scope">
              <el-dropdown class="more" v-show="scope.row.state=='1'">
                <el-button type="text" size="mini" class="mar_l10">
                  操作
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <span v-show="scope.row.type=='1' && scope.row.state=='1'"
                          @click="handClick(scope.row.id,'makeAdopt')">微信零钱打款</span>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <span v-show="scope.row.state=='1'" @click="handClick(scope.row.id,'adopt')">通过（线下转款）</span>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <span v-show="scope.row.state=='1'" @click="handClick(scope.row.id,'reject')">拒绝</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button size="mini" style="color: #489620" v-show="scope.row.state=='2'" type="text">已通过</el-button>
              <el-button size="mini" style="color: #df0029" v-show="scope.row.state=='3'" type="text">已拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            :current-page.sync='page.currentPage'
            @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </template>
    <template v-if="activeName == 2">
      <div class="outmain ba_f">
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>提现设置</span>
          </div>
        </div>
        <el-form ref="form" :model="form" label-width="180px" class="mar_t20">
          <el-form-item label="提现开关">
            <el-radio-group v-model="form.open">
              <el-radio label="1">开启</el-radio>
              <el-radio label="2">关闭</el-radio>
            </el-radio-group>
            <div class="yb_margin lh16">开启后，推荐者可以申请提现余额，请谨慎操作</div>
          </el-form-item>
          <div v-if="form.open=='1'">
            <el-form-item label="可提现渠道" prop="channel" required>
              <el-checkbox-group v-model="form.channel">
                <el-checkbox label="1">微信</el-checkbox>
                <el-checkbox label="2">支付宝</el-checkbox>
                <el-checkbox label="3">银行卡</el-checkbox>
                <el-checkbox label="4">余额</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="最低提现金额" prop="downMoney" required>
              <el-input v-model="form.downMoney" type="number" placeholder="请输入最低提现金额">
                <template slot="append">元</template>
              </el-input>
              <div class="yb_margin lh16">只能填写整数，不填写为不限制</div>
            </el-form-item>
            <el-form-item label="每单抽取费率" prop="rate" required>
              <el-input v-model="form.rate" type="number" placeholder="请输入每单抽取费率">
                <template slot="append">%</template>
              </el-input>
              <div class="yb_margin lh16">推荐者申请提现时，每笔申请提现扣除的费用，默认为空，即提现不扣费，支持填写小数</div>
            </el-form-item>
            <el-form-item label="提现手续费" prop="rateDownMoney" required>
              <el-input v-model="form.rateDownMoney" type="number" placeholder="请输入提现手续费">
                <template slot="prepend">最低</template>
                <template slot="append">元</template>
              </el-input>
              /
              <el-input v-model="form.rateUpMoney" type="number" placeholder="请输入金额">
                <template slot="prepend">最高</template>
                <template slot="append">元</template>
              </el-input>
              <div class="yb_margin lh16">推荐者提现时，提现费用的上下限，最高为空时，表示不限制扣除的提现费用</div>
            </el-form-item>
            <el-form-item label="提现间隔周期" prop="day" required>
              <el-input v-model="form.day" type="number" placeholder="请输入提现间隔周期">
                <template slot="append">天</template>
              </el-input>
              <div class="yb_margin lh16">提现周期设置为0， 表示不限制提现周期。</div>
            </el-form-item>
            <el-form-item label="提现说明">
              <baidu-ueditor :content="form.explain" @ueditor="getUeditor"></baidu-ueditor>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="mar_t20 ba_f pad_20 t_c">
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </template>
  </div>
</template>
<script>
import baiduUeditor from '@/plugins/baidu-ueditor';
import {withdrawalList, modifyWithdrawal} from "@/api/plug";
import {getConfig, postConfig} from '@/api/setup';
import {changeDate} from "@/utils";

export default {
  components: {
    baiduUeditor
  },
  data() {
    return {
      activeName: '1',
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      listLoading: false,
      tableData: [],
      formInline: {
        timeData: [],
        state: ''
      },
      withstate: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '1',
          label: '申请中'
        },
        {
          value: '2',
          label: '已通过'
        },
        {
          value: '3',
          label: '已拒绝'
        }
      ],
      form: {
        money: '',
        open: '1',
        channel: [],
        downMoney: '',
        rate: '',
        rateDownMoney: '',
        rateUpMoney: '',
        day: '',
        explain: '',
      }
    };
  },
  created() {
    if (this.activeName == '1') {
      this.fetchData();
    } else if (this.activeName == '2') {
      this.bus.$emit('loading', true);
      this.init();
    }
  },
  methods: {
    tableName() {
      if (this.activeName == '1') {
        this.fetchData();
      } else if (this.activeName == '2') {
        this.bus.$emit('loading', true);
        this.init();
      }
    },
    onSearch() {
      this.fetchData();
    },
    async fetchData() {
      this.listLoading = true;
      let startTime = '';
      let endTime = '';
      if (this.formInline.timeData) {
        startTime = changeDate(this.formInline.timeData[0]);
        endTime = changeDate(this.formInline.timeData[1]);
      }
      var params = {
        page: this.page.currentPage,
        state: this.formInline.state,
        item: 1,
        startTime,
        endTime,
      };
      const {data, count} = await withdrawalList(params);
      this.tableData = data;
      this.page.total = count;
      this.listLoading = false;
    },
    async handClick(id, type) {
      const {msg} = await modifyWithdrawal({id, type,});
      this.$baseMessage(msg, "success");
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    getUeditor(content) {
      this.form.explain = content;
    },
    async init() {
      const {data} = await getConfig({ident: 'oldWithNewWithdrawalSet'});
      this.form2 = this.form;
      this.form = Object.assign(this.form2, data);
      this.bus.$emit('loading', false);
    },
    submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.form.ident = 'oldWithNewWithdrawalSet';
          this.form.identName = '老带新提现设置';
          const {msg} = await postConfig(this.form);
          this.$baseMessage(msg, 'success');
          this.init();
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.el-dropdown-menu {
  width: auto !important;
  text-align: center;
}
</style>
